// 导航
let box = document.querySelector(".box");
let nav = document.querySelector(".top");
let btn = document.querySelector(".btn");

let daohang = nav.querySelector(".daohang");
let lis = daohang.querySelectorAll("ul li");
// console.log(lis);

// 点击切换至登录页面
btn.onclick = function () {
  location.href = "../html/login.html";
};

// 点击切换导航栏高亮
lis.forEach(function (item, index) {
  item.onclick = function () {
    if (index == 0) {
      location.href = "../html/shouye.html";
    }
    if (index == 1) {
      location.href = "../html/shouye.html#matter1";
    }
    if (index == 2) {
      location.href = "../html/wisdom.html";
    }
    if (index == 4) {
      location.href = "../html/tool.html";
    }
    if (index == 5) {
      location.href = "../html/case.html";
    }
   
  };
});

let back_top = document.querySelector(".back_top");
// 显示回到顶部
window.onscroll = function () {
  if (!(scrollY >= 450)) {
    back_top.style.display = "none";
    return;
  }
  back_top.style.display = "block";
};
// 点击回到顶部
back_top.onclick = function () {
  scrollTo({ top: 0, behavior: "smooth" });
};

// banner切换
let banner = document.querySelector(".banner");
let swiper = document.querySelector(".swiper");
let slides = document.querySelectorAll(".slide");
let pagination = document.querySelector(".pagination");
// 循环生成分页
let str = "";
slides.forEach((item, index) => {
  if (index == 0) {
    str += `<span class="active"></span>`;
  } else {
    str += `<span></span>`;
  }
});
pagination.innerHTML = str;
// 克隆第一个元素添加到最后
let lastslide = slides[0].cloneNode(true);
swiper.appendChild(lastslide);
slides = document.querySelectorAll(".slide");
let width = slides[0].offsetWidth; //1349
let slideslen = slides.length; //3
swiper.style.width = slideslen * width + "px";
// 获取所有的小圆点
let spans = pagination.querySelectorAll("span");
let index = 0;
let flag = false;
// 自动轮播
let timer = setInterval(() => {
  index++;
  slideshow();
}, 5000);
// 点击切换
spans.forEach(function (item, idx) {
  item.onclick = function () {
    for (var i = 0; i < spans.length; i++) {
      spans[i].classList.remove("active");
    }
    this.classList.add("active");
    swiper.style.left = -idx * width + "px";
  };
  slideshow();
});
function slideshow() {
  // 排他思想：移出所有里的active，再给当前索引为index的li添加
  for (var i = 0; i < spans.length; i++) {
    spans[i].classList.remove("active");
  }
  if (index == slideslen - 1) {
    spans[0].classList.add("active");
  } else {
    spans[index].classList.add("active");
  }
  move(swiper, { left: -index * width }, function () {
    if (index == slideslen - 1) {
      index = 0;
      swiper.style.left = index * width + "px";
    }
    flag = false;
  });
}

// ajax
// 精品专栏
column_list();
async function column_list() {
  let data = await pAjax({
    url: "http://localhost:9090/lwt_api/config_column_list",
  });
  data = JSON.parse(data).data;
  let res = data.slice(0, 1);
  let res1 = data.slice(1);
  specialF(res);
  specialS(res1);
}
// 精品专栏数据渲染
let section1 = document.querySelector(".section1");
let first = document.querySelector(".first");
let second = document.querySelector(".second");
function specialF(data) {
  let str = "";
  data.map((item) => {
    str = `
      <div class="column">
                <div class="column-L">
                  <div class="L-top">
                    <div class="column-tag">
                      <span>精品专栏</span>
                    </div>
                    <h4>${item.column_title}</h4>
                    <div class="num">
                      <p>
                        已有
                        <span>${item.view_cnt}</span>
                        人学习
                      </p>
                    </div>
                    <p class="text">
                      ${item.column_desc}
                    </p>
                  </div>
                  <div class="L-bottom">
                    <div>
                      <img
                        src="https://p1.ssl.qhimg.com/t0198cd6db4f9054f1c.png"
                        alt=""
                      />
                      <span>课程详情</span>
                    </div>
                    <button>立即订阅</button>
                  </div>
                </div>
                <div
                  class="column-R"
                  style="
                    background-image: url(${item.cover_url});
                  "
                ></div>
              </div>
    `;
    first.innerHTML = str;
  });
}
function specialS(data) {
  let str = "";
  data.forEach((item) => {
    str = `<div class="item">
                <div class="item-tag">
                  <span>精品专栏</span>
                </div>
                <div class="item-top">
                  <div
                    class="item-img"
                    style="
                      background-image: url(${item.cover_url});
                    "
                  ></div>
                  <h4>${item.column_title}</h4>
                  <div class="num">
                    <p>
                      已有
                      <span>${item.view_cnt}</span>
                      人学习
                    </p>
                  </div>
                  <p class="item-text">
                   ${item.column_desc}
                  </p>
                </div>
                <div class="item-bottom">
                  <div>
                    <img
                      src="https://p1.ssl.qhimg.com/t0198cd6db4f9054f1c.png"
                      alt=""
                    />
                    <span>课程详情</span>
                  </div>
                  <button>立即订阅</button>
                </div>
              </div>`;
    second.innerHTML += str;
  });
}

// 精品课程
course_list();
async function course_list() {
  let data = await pAjax({
    url: "http://localhost:9090/lwt_api/config_course_list",
  });
  data = JSON.parse(data).data;
  //   console.log(data);
  classes(data);
}
// 精品课程数据渲染
let section2 = document.querySelector(".section2");
let list = section2.querySelector(".list");

function classes(data) {
  let str = "";
  data.forEach((item) => {
    str += `<div class="list_item">
                <a href="" class="item">
                  <div
                    class="item-img"
                    style="
                      background-image: url(${item.cover_url});
                    "
                  ></div>
                  <h4 class="item-title">${item.course_title}</h4>
                  <p class="item-nav">${item.course_desc}</p>
                </a>
              </div>
              `;
    list.innerHTML = str;
  });
}

// 讲师风采
let section3 = document.querySelector(".section3");
let teacher = document.querySelector(".teacher");
let swiperContent = document.querySelector(".swiper-content");
let content = document.querySelector(".content");
let Left = section3.querySelector(".Left");
let Right = section3.querySelector(".Right");

teacher_list();
async function teacher_list() {
  let data = await pAjax({
    url: "http://localhost:9090/lwt_api/config_teacher_list",
  });
  data = JSON.parse(data).data;
  // console.log(data);
  teachers(data);

  //自动轮播
  let timer = setInterval(function () {
    // shift()删除数据中
    let shift = data.shift();
    // push（数据）添加到数组的最后一个
    data.push(shift);
    teachers(data);
  }, 3000);

  // 鼠标移入暂停定时器移出开启定时器
  teacher.onmouseover = function () {
    clearInterval(timer);
  };
  teacher.onmouseout = function () {
    timer = setInterval(function () {
      let shift = data.shift();
      data.push(shift);
      teachers(data);
    }, 2000);
  };

  Left.onclick = function () {
    // pop（）删除数组中最后一个数据
    let pop = data.pop();
    // unshift（数据）往数组的最前面添加数据
    data.unshift(pop);
    teachers(data);
  };

  Right.onclick = function () {
    let shift = data.shift();
    data.push(shift);
    teachers(data);
  };
}

// 讲师风采数据渲染
function teachers(data) {
  let str = "";
  data.forEach((item) => {
    str += `<div
              class="item"
              style="
                background-image: url(${item.pic_head_url});
              "
            >
              <div class="mask">
                <h6>讲师：${item.teacher_name}</h6>
                <p>
                  ${item.teacher_desc}
                </p>
              </div>
            </div>`;
    content.innerHTML = str;
  });
}
